<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/fruitdetails/mystyle.css"/>
    <link rel="stylesheet" href="./css/fruitdetails/shopsingle.css"/>
    <style type="text/css">
        .fixed_div{
            position:fixed;
            text-align: center;
            bottom:10px;
            width:100%;
            display: none;
        }
    </style>
</head>
<body style="background-color: #eee;border-left: 2px solid #e3e3e3">
<div id="comments"></div>
<div id="all-comment"></div>
    <div class="fixed_div">
        <div id="response" class="row">
            <div class="col-lg-2" style="font-weight: 900;color:#4CAF50">
                @<span id="replied-name">receiverName</span>：
            </div>
            <div class="col-lg-10">
                <div class="input-group">
                    <input type="text" id="reply-content" class="form-control" placeholder="请输入您的回复内容" autocomplete="off">
                        <span class="input-group-btn">
                            <button id="reply-submit" class="btn btn-default" style="background-color: #4cae4c;outline: none;color: white" type="button" >提交</button>
                        </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script>
    //获取消息
    var messageIds = new Array();
    var commentId;
    function messageAlert() {

        //iframe中的src值
        var parentUrl = decodeURIComponent(window.location.href);
        commentId = parentUrl.split('=')[1];

        $.ajax({
            url:"/comment/message",
            type:"post",
            success:function (data) {
                console.log(data);

                //获取消息id，用于突出显示评论消息
                for (var i=0; i<data.length; i++){
                    if (commentId === data[i].commentId){
                        for (var j=0; j<data[i].commentMessageInfos.length; j++){
                            messageIds.push(data[i].commentMessageInfos[j].messageId);
                        }
                        break;
                    }
                }
            }
        });

        getComment(commentId);

    }
    messageAlert();

    //获取一级评论消息
    function getComment(obj) {
        $.post("/comment/resourcecomment?commentId="+obj,function (data) {
            console.log(data);

            var html = "";

                html += '<div class="comment-outer"><div class="comment-customer"><div class="customer-review">';
                html += '<img src="/img/fruitdetails/review.png" alt=""/></div><div class="customer-info">';
                html += '<span class="customer-name">'+data.senderName+'</span><br/>';
                html += '<span class="create-time">'+data.commentTime+'</span>';
                html += '<span class="info-spilt"> | </span><span class="resource-name">'+data.resourceName+'</span></div>';
                html += '<div class="comment-star">';

                for ( var j=0; j<data.commentStar; j++){
                    html += '<img src="/img/fruitdetails/评星1.png" alt=""/>';
                }
                html += '<span>评星：<span>'+data.commentStar+'</span>/5</span></div></div><div class="comment-content">';
                html += '<span class="content-txt">'+data.commentContent+'</span><div style="margin-top: 15px">';

                var picUrls = data.commentPic;
                if (picUrls != null){
                    for (var j=0; j<picUrls.length; j++){
                        html += '<img src="'+data.commentPic[j]+'" style="margin-right: 15px;width: 150px;border: 2px dashed #eee">'
                    }
                }

                html += '</div></div>';
                html += '<div><div class="comment-handle"><span class="hidden">'+data.id+'</span><a href="javascript:void(0);" onclick="response(this)">';
                html += '<img src="/img/fruitdetails/comment.png" class="comment-pic" alt=""/><span>评论</span>';
                html += '<span style="font-size: 5px;font-weight: 800">';

                html += '</span></a>';


            $('#comments').html(html);

            get_allresponse(obj)

        })
    }

    //一级评论名
    var firstUserName;
    //二级三级评论直接获取
    function get_allresponse(obj) {
        $.post("/comment/showallresponse?id="+obj,function (data) {
            console.log(data);


            var html ='';
            if (data == null || data == "") {
                $('#is-comment').html("暂无评论");
            } else {
                for (var i = 0; i < data.length; i++) {
                    if (data[i] == null){
                        continue;
                    }

                    html += '<div class="comment-second" style="padding-left: 20px"><div class="user-info"><div class="user-review">';
                    html += '<img src="/img/fruitdetails/review.png" alt=""/></div><div class="user-infos"><span class="user-name">';
                    html += data[i].senderName + '</span><br/><span class="user-ctime">';
                    html += data[i].commentTime;
                    html += '</span></div></div>';
                    html += '<div style="float: right;margin-top: -50px;padding-right: 25px"><span style="display: none">'+data[i].id+'</span><a href="#response" onclick="reply(this)">回复</a></div>';
                    html += '<div class="comment-content"><span class="content-txt">';
                    html += data[i].responseContent + '</span></div></div>';

                    if (data[i].responses == null){
                        continue;
                    }

                    for (var m=0; m<data[i].responses.length; m++){
                        html += '<div class="comment-third"><div class="user-info"><div class="user-review">';
                        html += '<img src="/img/fruitdetails/review.png" alt=""/></div><div class="user-infos"><span class="user-name">';
                        html += data[i].responses[m].senderName+'</span><br/><span class="user-ctime">';
                        html += data[i].responses[m].commentTime;
                        html += '</span></div></div>';
                        html += '<div style="float: right;margin-top: -50px;padding-right: 16px"><span style="display: none">'+data[i].responses[m].id+'</span><a href="#response" onclick="newreply(this)">回复</a></div>';
                        html += '<div class="comment-content">';
                        html += '<span class="touser">回复'+data[i].responses[m].receiverName;
                        html += ':</span><span class="content-txt">';
                        html += data[i].responses[m].responseContent+'</span></div></div>';
                    }

                    firstUserName = data[0].receiverName;
                }

            }
            //被回复的姓名
            $('#replied-name').html(firstUserName);
            $('#all-comment').html(html);
        })
    }

    //添加二级评论的三级评论
    function add_reply(obj) {

        var content = $(obj).parent().parent().children().eq(0).val();

        if ( content === null || content === ''){
            alert("评论内容不能为空");
            return;
        }
        $.post("/comment/addreply?id="+responseId+"&content="+content, function (data) {

            if (data == "success"){
                alert("添加成功");
//                location.reload();
//                parent.location.reload();
                getComment(commentId);
                $('.fixed_div').css("display","none");
            }else if (data === "fail"){
                alert("添加失败");
            }

        })
    }

    //添加三级评论的三级评论
    function add_new_reply(obj) {
        var content = $(obj).parent().parent().children().eq(0).val();

        if ( content === null || content === ''){
            alert("评论内容不能为空");
            return;
        }
        $.post("/comment/addnewreply?id="+replyId+"&content="+content, function (data) {

            if (data == "success"){
                alert("添加成功");
//                location.reload();
//                parent.location.reload();
                getComment(commentId);
                $('.fixed_div').css("display","none");
            }else if (data === "fail"){
                alert("添加失败");
            }

        })
    }


    //提交二级评论
    function add_response(obj) {
        var addresponseContent = $(obj).parent().parent().children().eq(0).val();

        if (addresponseContent === null || addresponseContent ===''){
            alert("评论内容不能为空");
            return;
        }
        $.post("/comment/addresponse?id="+commentId+"&content="+addresponseContent,function (data) {
            if (data == "success"){
                alert("添加成功");
//                location.reload();
//                parent.location.reload();
                getComment(commentId);
                $('.fixed_div').css("display","none")
            }else if (data === "fail"){
                alert("添加失败");
            }
        })
    }

    //评论框切换到评论一级评论状态

    function response(obj){
        $('.fixed_div').css("display","block");

        //回复名
        var receiverName = $(obj).parent().parent().children().eq(0).children().eq(1).children().eq(0).html();
        $('#replied-name').html(receiverName);

        $('#reply-submit').attr("onclick","add_response(this)");

    }


    //评论框切换到评论二级评论状态
    //二级评论id
    var responseId;
    function reply(obj){
        responseId = $(obj).parent().children().eq(0).html();
        $('.fixed_div').css("display","block");

        //回复名
        var receiverName = $(obj).parent().parent().children().eq(0).children().eq(1).children().eq(0).html();
        $('#replied-name').html(receiverName);

        $('#reply-submit').attr("onclick","add_reply(this)");

   }

    //评论框切换到评论三级级评论状态
    //三级评论id
    var replyId;
    function newreply(obj){
        replyId = $(obj).parent().children().eq(0).html();
        $('.fixed_div').css("display","block");

        //回复名
        var receiverName = $(obj).parent().parent().children().eq(0).children().eq(1).children().eq(0).html();
        $('#replied-name').html(receiverName);
        $('#reply-submit').attr("onclick","add_new_reply(this)");
    }

</script>
</body>
</html>